<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>登录/注册</title>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="screen"
			rel="stylesheet" type="text/css">
		<script src="./js/jquery.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="./css/register.css" />
	</head>
	<body>
		<div class="mainbody middle">
			<form class="form-box front">
				<div class="title">
					<h1>登 &nbsp; 录</h1>
				</div>
				<div class="login">
					<p class="icon">
						<i class="fa fa-user-circle-o" aria-hidden="true"></i>
						<input class="input-normal1" type="text" placeholder="手机号/邮箱/用户名" />
					</p>
					<p class="icon">
						<i class="fa fa-key" aria-hidden="true"></i>
						<input class="input-normal1" type="password" placeholder="密码" />
					</p>
					<button class="btn-submit" type="submit"> 登 &nbsp;&nbsp; 录 </button>
				</div>
				<div class="footer">
					<p style="margin-top: 40px">还没有账号? &nbsp; <a class="tz" id="signup" href="#"> 点击注册 </a></p>
					<div class="return"><a href="index.html">让我再想想</a></div>
				</div>
				
			</form>

			<form class="form-box back">
				<div class="title">
					<h1>注 &nbsp; 册</h1>
				</div>
				<div class="register">
					<p class="icon">
						<i class="fa fa-user-circle-o" aria-hidden="true"></i>
						<input class="input-normal2" type="text" placeholder="用户名" />
					</p>
					<p class="icon">
						<i class="fa fa-key" aria-hidden="true"></i>
						<input class="input-normal2" type="password" placeholder="密码" />
					</p>
					<p class="icon">
						<i class="fa fa-key" aria-hidden="true"></i>
						<input class="input-normal2" type="password" placeholder="确认密码" />
					</p>
					<p class="icon">
						<i class="fa fa-envelope" aria-hidden="true"></i>
						<input class="input-normal2" type="email" placeholder="邮箱" />
					</p>
					<p class="icon">
						<i class="fa fa-phone" aria-hidden="true"></i>
						<input class="input-normal2" type="text" placeholder="手机号" />
					</p>
					<button class="btn-submit" type="submit"> 注 &nbsp;&nbsp; 册 </button>
				</div>
				<div  class="footer">
					<p style="margin-top: 40px"> 已有账户号? &nbsp; <a class="tz" id="signin" href="#"> 点击登录 </a> </p>
					<div class="return"><a href="index.html">让我再想想</a></div>
				</div>
			</form>


		</div>
		<script type="text/javascript">
			$(".icon i").toggleClass("fa-lg");
			$("#signup").click(function() {
				$(".middle").toggleClass("middle-flip");
			});
			$("#signin").click(function() {
				$(".middle").toggleClass("middle-flip");
			});
		</script>
	</body>
</html>
